<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>

      <template #right>
        <van-button to="/search" round icon="search">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- tabs -- 频道栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownList" :key="item.id" :title="item.name">
        <article-list :channel_id="item.id" />
      </van-tab>

      <div class="icon-box" @click="$refs.channel.show = true">
        <van-icon name="wap-nav" />
      </div>
    </van-tabs>

    <!-- 编辑频道 -->
    <!-- <channel-edit
      ref="channel"
      :own-list="ownList"
      :all-list="allList"
      @add="ownList.push($event)"
      @del="ownList = ownList.filter(v => v.id !== $event) "
      :value="active"
      @input="active = $event"
    /> -->

    <!--
      因为v-model本质只是个语法糖
        帮你生成了
          :value="数据"
          @input="数据 = $event"
     -->
    <channel-edit
      ref="channel"
      :own-list="ownList"
      :all-list="allList"
      @add="ownList.push($event)"
      @del="del"
      v-model="active"
    />
  </div>
</template>

<script>
import { ownListAPI, allListAPI, saveChannelAPI } from '@/api/channel'
import ArticleList from './components/ArticleList'
import ChannelEdit from './components/ChannelEdit.vue'
export default {
  name: 'MyHome',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      active: 0,
      // 保存自己的频道
      ownList: [],
      // 保存所有的频道
      allList: [],
      isFirst: true
    }
  },
  // 写侦听器的地方
  watch: {
    // 侦听我的频道数组
    async ownList () {
      // 开关思想
      if (this.isFirst) {
        this.isFirst = false
        return
      }
      // 判断是否登录
      if (this.$store.state.user.tokenObj.token) {
        // 虽然要存的是ownList，但是不能直接传给服务器
        // 因为服务器要的参数跟ownList不一样，要做转换
        // 转换后的结果要跟ownList原数组长度保持一致
        const channels = this.ownList.map((v, i) => {
          return {
            id: v.id,
            seq: i
          }
        })
        // 登录了,发请求
        await saveChannelAPI({
          channels
        })
      } else {
        // 没登录，存到本地
        localStorage.setItem('channel98', JSON.stringify(this.ownList))
      }
    }
  },
  methods: {
    del (index) {
      // 判断要删的下标在不在当前选中的元素前面
      if (index < this.active) {
        // 如果在前面要让下标-1
        this.active--
      }
      this.ownList.splice(index, 1)
    }
  },
  async created () {
    // 1. 发送请求获取我的频道 - 做判断有没登录，登录就发请求，没登录就获取本地存储
    // if (this.$store.state.user.tokenObj.token) {
    //   const res1 = await ownListAPI()
    //   this.ownList = res1.data.channels
    // } else {
    //   // 没登录
    //   const res = JSON.parse(localStorage.getItem('channel98'))
    //   if (res) {
    //     // 有
    //     this.ownList = res
    //   } else {
    //     // 没有-发请求
    //     const res1 = await ownListAPI()
    //     this.ownList = res1.data.channels
    //   }
    // }

    // 小小的优化 -- 总结得到有token或者本地存储没数据都要发请求，所以写个||
    const res = JSON.parse(localStorage.getItem('channel98'))
    if (this.$store.state.user.tokenObj.token || !res) {
      const res1 = await ownListAPI()
      this.ownList = res1.data.channels
    } else {
      this.ownList = res
    }

    // 2. 发送请求获取所有频道
    const res2 = await allListAPI()
    this.allList = res2.data.channels
  }
}
</script>

<style lang="less" scoped>
.logo {
  width: 120px;
  height: 100%;
  background: url(@/assets/logo.png) no-repeat center / contain;
}

.van-button {
  width: 100px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  color: #fff;
  .van-icon-search {
    color: #fff;
  }
}

::v-deep .van-tabs__wrap {
  width: 345px;
}

.icon-box {
  position: absolute;
  right: 0;
  top: 5px;
  background-color: #fff;
  .van-icon {
    font-size: 30px;
  }
}
</style>
